<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import request from '@/api/index';
  import { foolGiftList, nickName } from '@/pinia/getter';
  import { xmloading } from '@/utils/public';
  import giftListBox from '@/components/giftListBox.vue';
  import xmimg from '@/components/xmimg.vue';
  import floorInfo from './info.vue';
  const action = reactive({
    threeLevel:[] as Array<any>,
    normalLevel:[] as Array<any>,
    levelTips:false
  })
  const occupancy = {
    portrait:'',nickname:'虚位以待'
  }
  const getuserbridge = async(type='')=>{
    const loading = xmloading()
    const res = await request.bridgeList()
    loading.close()
    const { normalLevel=[],specialLevel={}} = res.data
    const { nextlevel=0,firstlevel=0,secondlevel=0, firstLevelInfo={}, secondLevelInfo={}} = specialLevel
    const { senduserinfo={...occupancy}, receiveuserinfo={...occupancy} } = firstLevelInfo
    const { senduserinfo:secodSenduserinfo={...occupancy}, receiveuserinfo:secodReceiveuserinfo={...occupancy} } = secondLevelInfo
    
    let list = [{level:nextlevel,list:[{...occupancy},{...occupancy}] as Array<any>}]
    if(firstlevel) list.push({level:firstlevel,list:[senduserinfo,receiveuserinfo]})
    if(secondlevel) list.push({level:secondlevel,list:[secodSenduserinfo,secodReceiveuserinfo]})
    action.threeLevel = list
    if(normalLevel.length == 0) {
      action.levelTips = true
    }else {
      action.normalLevel = normalLevel.map((res:any)=>{
        let { level, is_special,senduserinfo:sendinfo={}, receiveuserinfo:receiveinfo={} } = res
        if(!sendinfo.user_id) sendinfo = {...occupancy}
        if(!receiveinfo.user_id) receiveinfo = {...occupancy}
        return {
          level,
          is_special,
          list:[sendinfo,receiveinfo]
        }
      })
    }
    action.levelTips = true
  }
  onMounted(()=>{
    getuserbridge()
  })
</script>
<template>
  <div class="floorBox">
    <giftListBox
      :giftList="foolGiftList"
      titleImage="floor/titleimg1.png"
    />
    <div class="floorList">
      <xmimg src="floor/titleimg2.png" class="titleImage" />
      <floorInfo
        v-for="(item) in action.threeLevel"
        :floorType="1"
        :level="item.level"
        :userlist="item.list"
      />
      <xmimg src="floor/titleimg3.png" class="titleImage" />
      <floorInfo
        v-for="(item) in action.normalLevel"
        :floorType="item.is_special"
        :level="item.level"
        :userlist="item.list"
      />
      <!-- <div v-if="action.levelTips" class="tipsFont">暂无更多楼层，快去前往盖楼吧～</div> -->
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .floorBox {
    width: 100%;
    padding: 0 var(--floorBoxPaddingX) var(--contentPaddingBotton);
    box-sizing: border-box;
    :deep(.giftListBack) {
      background-image: var(--floorGiftBackImage) ;
      .giftList .giftBox {
        .name {
          color: var(--floorGiftNameColor);
        }
        .price span {
          color: var(--floorGiftNameColor);
        }
      }
    }
    .floorList{
      width: 327px;
      margin: 0 auto;
      .titleImage {
        width: 100%;
        height: 50px;
        margin: 30px 0 20px 0;
      }
      .floorUserInfo {
        margin-bottom: 12px;
      }
      .floorUserInfo:nth-last-child(1) {
        margin-bottom: 0;
      }
      .tipsFont {
        width: max-content;
        color: rgba($color: #fff, $alpha: .5);
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        margin: 16px auto 16px;
      }
    }
  }
</style>